<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>iPhone 销量地域分布情况</title>  
</head>  
  
<body> 
  
<div id="main" style="width: 600px;height:600px;"></div>  
<script type="text/javascript" src="/static/js/jquery-1.9.1.js"></script>  
<script type="text/javascript" src="/static/js/echarts.js"></script>  
<script type="text/javascript" src="/static/js/china.js"></script> 
 <!-- 为ECharts准备一个具备大小（宽高）的Dom -->    
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));  
        var symbolSize = 20;
        var data = [[15, 0], [-50, 10], [-56.5, 20], [-46.5, 30], [-22.1, 40]];

        var myChart = echarts.init(document.getElementById('main'));

        myChart.setOption({
            tooltip: {
                triggerOn: 'none',
                formatter: function (params) {
                    return 'X: ' + params.data[0].toFixed(2) + '<br>Y: ' + params.data[1].toFixed(2);
                }
            },
            xAxis: {
                min: -100,
                max: 80,
                type: 'value',
                axisLine: {onZero: false}
            },
            yAxis: {
                min: -30,
                max: 60,
                type: 'value',
                axisLine: {onZero: false}
            },
            series: [
                {
                    id: 'a',
                    type: 'line',
                    smooth: true,
                    symbolSize: symbolSize,
                    data: data
                }
            ],
        });        

        myChart.setOption({
            graphic: echarts.util.map(data, function (item, dataIndex) {
                return {
                    type: 'circle',
                    position: myChart.convertToPixel('grid', item),
                    shape: {
                        r: symbolSize / 2
                    },
                    invisible: true,
                    draggable: true,
                    ondrag: echarts.util.curry(onPointDragging, dataIndex),
                    onmousemove: echarts.util.curry(showTooltip, dataIndex),
                    onmouseout: echarts.util.curry(hideTooltip, dataIndex),
                    z: 100
                };
            })
        });


        window.addEventListener('resize', function () {
            myChart.setOption({
                graphic: echarts.util.map(data, function (item, dataIndex) {
                    return {
                        position: myChart.convertToPixel('grid', item)
                    };
                })
            });
        });

        function showTooltip(dataIndex) {
            myChart.dispatchAction({
                type: 'showTip',
                seriesIndex: 0,
                dataIndex: dataIndex
            });
        }

        function hideTooltip(dataIndex) {
            myChart.dispatchAction({
                type: 'hideTip'
            });
        }

        function onPointDragging(dataIndex, dx, dy) {
            data[dataIndex] = myChart.convertFromPixel('grid', this.position);
            myChart.setOption({
                series: [{
                    id: 'a',
                    data: data
                }]
            });
        }

    
    </script>  
  
</body>  
</html>